<template>
  <!-- <div class="common-layout"> -->
  <el-container style="min-height: 100vh; ">
    <el-header height="10%" style="background-color: rgba(0, 0, 0,0.0);">
      <div style="height: 100%;"></div>
    </el-header>
    <el-main height="80%">
      <!-- <el-layout> -->
      <el-row>
        <el-col :span="12">
          <div class="grid-content"></div>
        </el-col>

        <el-col :span="6" class="loginCol">
          <div class="grid-content bg-purple-light" @keyup.enter="handleLogin">
            <el-row class="loginTitle">
              <h1>登录</h1>
            </el-row>

            <!-- 普通输入框区域 -->
            <!-- 用户名输入 -->
            <el-row class="form-item">
              <el-col :span="24">
                <el-icon class="el-input__icon">
                  <User />
                </el-icon>
                <el-input v-model="identifier" class="inp mobile" placeholder="请输入账户手机号/邮箱" type="text"
                  @blur="validateidentifier">

                </el-input>

                <span v-if="identifierError" class="error-message">{{ identifierError }}</span>
              </el-col>
            </el-row>
            <!-- 密码输入 -->
            <el-row class="form-item">
              <el-col :span="24">
                <el-icon class="el-input__icon">
                  <Lock />
                </el-icon>
                <el-input v-model="password" class="inp password" placeholder="请输入密码" :type="passwordType"
                  @blur="validatePassword">
                  <template #suffix>
                    <el-icon @click="togglePasswordType">
                      <View v-if="isPasswordVisible" />
                      <Hide v-else />
                    </el-icon>

                  </template>
                </el-input>
                <span v-if="passwordError" class="error-message">{{ passwordError }}</span>
              </el-col>
            </el-row>
            <!-- 图像验证码 11111111111-->
            <!-- <div class="form-item">
              
            </div> -->
            <el-row class="form-item">
              <el-col :span="24">
                <el-icon>
                  <InfoFilled />
                </el-icon>
                <el-input v-model="picCode" class="inp picInp" maxlength="4" placeholder="请输入验证码" type="text">
                  <template #append>
                    <img class="picCode" :src="picUrl" @click="getPicCode" alt="验证码" />
                  </template>
                </el-input>
                <span v-if="picCodeError" class="error-message">{{ picCodeError }}</span>
              </el-col>
            </el-row>

            <!-- 确认按钮 -->
            <button class="buttonLogin" @click.prevent="handleLogin">确认</button>
            <!-- 注册链接 -->
            <el-row>
              <router-link class="tourist" to="/">
                <el-icon size="11">
                  <Pointer />
                </el-icon>
                我是游客
              </router-link>
              <strong style="color: #999; font-size: 11px; margin:0  10px; ">|</strong>
              <router-link class=" registerLink" to="/register">
                注册账户
                <el-icon size="11">
                  <CaretRight />
                </el-icon>
              </router-link>
            </el-row>


          </div>
        </el-col>

      </el-row>
      <!-- </el-layout> -->
    </el-main>
    <el-footer height=" 10%" class="footer">
      <Footers />
    </el-footer>
  </el-container>

</template>


<style lang="less" scoped>
.el-container {
  background-image: url('@/assets/background5.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.footer {
  padding: 0;
  margin: 0;
}

.loginCol {
  margin-top: 7%;
  text-align: center;
  padding: 20px;
}

.loginCol .el-row {
  margin: 13px auto;
}

.loginTitle {
  font-size: 20px;
  border-bottom: 2px solid #549eb2;
  color: #202c35;
  text-shadow: 3px 4px 33px #549eb2;
  margin-bottom: 10px;
}

.bg-purple-light {
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: rgb(255, 255, 255);
  box-shadow: 33px 4px 40px rgba(53, 53, 53, 0.702), 0 0 44px rgba(105, 68, 68, 0.04);
}

.form-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-items: center;
  width: 100%;

}

.inp {
  width: 70%;
  height: 100%;
  font-size: 14px;
  margin: 0px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;

  &:focus {
    outline: none;
    border: 1px solid #549eb2; // 修正了这里border的语法错误
    box-shadow: 0 0 4px rgba(84, 158, 198, 0.3);
  }
}

.picInp {
  font-size: 12px;
}

.picCode {
  width: 100%;
  /* 补充 px/rem 等单位！否则样式失效 */
  height: 30px;
  // border: 1px solid yellowgreen;
  cursor: pointer;
  border-radius: 4px;
  // overflow: hidden;
}

// 图片验证码
:deep(.el-input-group__append) {
  padding: 0 !important; // 强制清零内边距
}

.error-message {
  color: #f56c6c;
  font-size: 11px;
  position: absolute;
  bottom: -16px;
  left: 8%;
  padding-left: 10%;
}

.buttonLogin {
  width: 60%;
  height: 100%;
  margin: 10px auto;
  padding: 8px 0px;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  background-color: #549eb2;
  box-shadow: 0 2px 12px 0 rgba(84, 158, 198, 0.7);

  &:hover {
    background-color: #4a94bc;
    box-shadow: 0 -5px 16px rgba(84, 158, 198, 0.7);
  }
}

.tourist {
  font-size: 14px;
  color: #0aad28c0;
  text-decoration: none;
  cursor: pointer;
}

.registerLink {
  font-size: 14px;
  text-decoration: none;
  text-align: justify;
  color: #549eb2;

  &:hover {
    text-decoration: underline;
  }
}
</style>


<script setup>
import { ref, watch } from 'vue';

import { ElMessage } from 'element-plus';
import Footers from '@/components/footer/Footer.vue';
import { getCaptcha } from '@/api/user';
import { onMounted } from 'vue';
onMounted(() => { // 页面加载完成后执行
  getPicCode()

});

import { computed } from 'vue';
import { useUserStore } from '@/stores/user';
import router from '@/router';



// 密码显示状态部分
const isPasswordVisible = ref(false);
// 动态计算输入框类型
const passwordType = computed(() => isPasswordVisible.value ? 'text' : 'password');
// 切换密码显示状态
const togglePasswordType = () => {
  isPasswordVisible.value = !isPasswordVisible.value;
};

// 验证码部分
const picUrl = ref();
const getPicCode = async () => {
  // 发送请求获取验证码图片
  const res = await getCaptcha();
  console.log("验证码图片", res);

  picUrl.value = URL.createObjectURL(res.data);
  console.log("验证码图片路径", picUrl.value);

}
// 表单数据
const identifier = ref('');
const password = ref('');
const picCode = ref('');

// 验证状态
const identifierError = ref('');
const passwordError = ref('');
const picCodeError = ref('');

// 手机号正则
const phoneRegex = /^1[3-9]\d{9}$/;
// 邮箱正则
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;



// 用户名验证
const validateidentifier = () => {
  if (!identifier.value) {
    identifierError.value = '请输入账户';
  } else if (!phoneRegex.test(identifier.value) && !emailRegex.test(identifier.value)) {
    identifierError.value = '请输入正确的手机号或邮箱';
  } else {
    identifierError.value = '';
  }
};

// 密码验证
const validatePassword = () => {
  validateidentifier()

  if (!password.value) {
    passwordError.value = '请输入密码';

  } else {
    passwordError.value = '';
  }
};
// 验证码验证
const validatePicCode = () => {
  if (!picCode.value) {
    picCodeError.value = '请输入验证码';
  } else if (picCode.value.length !== 4) {
    picCodeError.value = '验证码格式错误';
  } else {
    picCodeError.value = '';
  }

};

// 登录处理
const handleLogin = async () => {
  // 手动触发所有验证
  validateidentifier();
  validatePassword();
  validatePicCode();

  // 检查是否有错误
  if (!identifierError.value && !passwordError.value && !picCodeError.value) {

    const loginData = {
      identifier: identifier.value,
      password: password.value,
      captcha: picCode.value
    }
    console.log(picCode.value, '验证码');

    const useStore = useUserStore();
    // 发送后端登录请求
    const loginResult = await useStore.login(loginData);
    console.log(loginResult, '登录结果');
    if (loginResult) {
      // 清空表单
      identifier.value = '';
      password.value = '';
      picCode.value = ''
      router.push('/')
    }
  }

};

// 实时监听输入并清除错误信息
watch([identifier, password], () => {
  identifierError.value = '';
  passwordError.value = '';
});




</script>
